<template>
  <div class="home">
    <van-nav-bar title="保单" @click-right="onClickRight">
      <!-- <van-icon name="search" slot="right" /> -->
    </van-nav-bar>
    <van-search v-model="queryContent" placeholder="搜索" @focus="onFocus" />
    <van-notice-bar v-if="active === 1" left-icon="volume-o" scrollable text="草稿可作为模板继续使用也可在投保页选择 “投保并删除草稿”" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-tabs @change="onRefresh" type="card" v-model="active" color="#1989fa" style="margin-top: 16px">
        <van-tab title="已投保">
          <van-list v-model="loading" :finished="finished" :error.sync="error" error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="onLoad">
            <div style="padding: 16px">
              <div style="background-color: #fff; margin-bottom: 4px" v-for="(item, index) in insureList" :key="index">
                <div class="container">
                  <van-tag style="position:absolute; right: 20%; top: 50%; z-index:1; opacity: 0.5;" mark :type="item.orderStatus === '4' ? 'danger' : 'success'">{{ item.orderStatus === '2' ? '订单支付成功' :
      item.orderStatus === '3' ? '投保成功' : item.orderStatus === '4' ? '投保失败' : '' }}</van-tag>
                  <div style="font-size: 16px; padding: 12px 0">
                    <van-icon style="margin: 0 5px 0 12px" color="#0283EF" name="location-o" size="18px" />{{
      item.startPlace + "-" + item.endPlace }}
                  </div>
                  <van-cell-group class="account-info">
                    <van-cell v-if="!item.insureNum" :title="item.orderNum" value="">
                      <template #title>
                        <span class="custom-title">{{ item.orderNum }}</span>
                      </template>
                    </van-cell>
                    <van-cell v-if="!!item.insureNum" title="保单号" :value="item.insureNum" />
                    <van-cell title="保险名称" :value="item.templateName" />
                    <van-cell title="投保日期" :value="item.createTime" />
                    <van-cell title="集装箱号" :value="item.containerNumber" />
                    <!-- <van-cell title="运单号" :value="item.tagInvoiceWaybill" /> -->
                    <van-cell title="保费（元）" :value="item.insureFee" />
                    <van-cell title="货物名称" :value="item.goodsName" />
                    <van-cell v-if="item.orderStatus === '4'" title="投保失败原因" :value="item.orderStatusRemark" />
                    <van-cell v-if="item.applyModifyStatus === '1'" title="批复状态" value="批复正在审核中" />
                    <van-cell v-if="item.applyModifyStatus === '2'" title="批复状态" value="批复成功" />
                    <van-cell v-if="item.applyModifyStatus === '3'" title="批复状态" value="批复失败" />
                  </van-cell-group>
                  <div style="margin: 12px 0 12px 16px; padding-bottom: 12px" v-if="item.applyModifyStatus !== '1'">
                    <van-button v-if="item.orderStatus === '3'" :disabled="!(item.orderStatus === '3' && item.reportStatus === '0')" style="margin-right: 3px;margin-bottom: 5px" type="primary"
                      size="small" @click="reportCaseClick(item.orderNum)">{{
      item.reportStatus === '6' ? '理赔种' : item.reportStatus === '7' ? '理赔完成' : '报案' }}</van-button>
                    <a :href="item.insureUrl" v-if="!!item.insureUrl && item.orderStatus !== '2'" download="保单">
                      <van-button style="margin-right: 3px;margin-bottom: 5px" type="primary" size="small">下载保单</van-button>
                    </a>
                    <van-button style="margin-right: 3px;margin-bottom: 5px" type="primary" size="small" @click="copyClick(item)">复制</van-button>
                    <van-button v-if="item.modifyStatus === '1' && item.reportStatus === '0' && item.orderStatus !== '4'" style="margin-right: 3px;margin-bottom: 5px" type="primary" size="small"
                      @click="batchOrder(item)">批单</van-button>
                    <!-- <van-button style="margin-right: 3px" type="primary" size="small" @click="changeOrderClick">改单</van-button> -->

                    <van-button v-if="!!item.insureUrl" style="margin-right: 3px;margin-bottom: 5px" type="primary" size="small" @click="configWechatSDK(item.insureUrl)">分享</van-button>
                    <!-- <van-button style="margin-right: 3px" type="primary" size="small" @click="aaa(item.insureUrl)">to</van-button> -->
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="草稿箱">
          <van-list v-model="draftLoading" :finished="draftFinished" :error.sync="draftError" error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="draftOnLoad">
            <div style="padding: 16px">
              <div style="background-color: #fff; margin-bottom: 4px" v-for="item in insuredList" :key="item.warrantyDarftId">
                <van-cell>
                  <!-- <template #title>
                    <van-checkbox @click="selectedDraft(item)" v-model="item.isTrue"></van-checkbox>
                  </template> -->

                  <template #title>
                    <van-checkbox v-if="!createTip(item.startTime)" @click="selectedDraft(item)" v-model="item.isTrue">{{ item.startPlace + "-" +item.endPlace }}</van-checkbox>
                    <span v-else>{{ item.startPlace + "-" +item.endPlace }}</span>
                  </template>
                </van-cell>
                <!-- <div style="font-size: 16px; padding: 12px 0">
                  <van-icon style="margin: 0 5px 0 12px" color="#0283EF" name="location-o" size="18px" />{{item.startPlace + "-" + item.endPlace }}
                </div> -->
                <van-cell-group class="account-info">
                  <van-cell title="保险名称" :value="item.templateName" />
                  <van-cell title="启运日期" :label="createTip(item.startTime)" :value="item.startTime" />
                  <van-cell title="集装箱号" :value="item.containerNumber" />
                  <van-cell title="保费（元）" :value="item.insureFee" />
                  <van-cell title="货物名称" :value="item.goodsName" />
                </van-cell-group>
                <div style="margin: 12px 0 12px 16px; padding-bottom: 12px">
                  <van-button style="margin-right: 3px" type="primary" size="small" @click="copyInsuredClick(item)">复制</van-button>
                  <van-button style="margin-right: 3px" type="primary" size="small" @click="editInsuredClick(item)">编辑</van-button>
                  <van-button style="margin-right: 3px" type="primary" size="small" @click="delClick(item.warrantyDarftId)">删除</van-button>
                  <van-button style="margin-right: 3px" type="primary" size="small" @click="detailClick(item)">详情</van-button>
                </div>
              </div>
            </div>
          </van-list>
          <div style="margin-top: 30px; height: 30px; width: 100%"></div>
          <van-submit-bar style="position: fixed !important; bottom: 60px !important;" :price="price" button-text="提交" @submit="onSubmit('draft')">
            <van-checkbox @click="allClickDraft" v-model="checked">全选</van-checkbox>
          </van-submit-bar>

        </van-tab>
        <van-tab title="待支付">
          <van-list v-model="paidLoading" :finished="paidFinished" :error.sync="paidError" error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="paidOnLoad">
            <div style="padding: 16px">
              <div style="background-color: #fff; margin-bottom: 4px" v-for="item in paidList" :key="item.orderNum">
                <van-cell :title="item.orderNum" value="">
                  <template #title>
                    <span class="custom-title">{{ item.orderNum }}</span>
                  </template>
                </van-cell>
                <van-cell>
                  <template #title>
                    <van-checkbox @click="insureNameChange(item)" v-model="item.isTrue">{{ item.startPlace + "-" +item.endPlace }}</van-checkbox>
                  </template>
                </van-cell>
                <!-- <div style="font-size: 16px; padding: 12px 0">
                  <van-icon style="margin: 0 5px 0 12px" color="#0283EF" name="location-o" size="18px" />{{
                    item.startPlace + "-" + item.endPlace }}
                </div> -->
                <van-cell-group class="account-info">
                  <!-- <van-cell title="投保日期" :value="item.createTime" /> -->
                  <van-cell title="保险名称" :value="item.templateName" />
                  <van-cell title="集装箱号" :value="item.containerNumber" />
                  <!-- <van-cell title="运单号" :value="item.tagInvoiceWaybill" /> -->
                  <van-cell title="保费（元）" :value="item.insureFee" />
                  <van-cell title="货物名称" :value="item.goodsName" />
                </van-cell-group>
                <div style="margin: 12px 0 12px 16px; padding-bottom: 12px">
                  <van-button style="margin-right: 3px" type="primary" size="small" @click="delClick(item.orderNum)">删除</van-button>
                </div>
              </div>
            </div>
          </van-list>
          <div style="margin-top: 30px; height: 30px; width: 100%"></div>
          <van-submit-bar style="position: fixed !important; bottom: 60px !important;" :price="price" button-text="提交" @submit="onSubmit()">
            <van-checkbox @click="allClick" v-model="checked">全选</van-checkbox>
          </van-submit-bar>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
    <div style="margin-top: 30px; height: 30px; width: 100%"></div>
    <van-dialog v-model="show" title="拆单" show-cancel-button>
      <van-checkbox-group v-model="result">
        <van-checkbox shape="square" style="margin: 16px 0 16px 20%" name="a">SLPU2098283</van-checkbox>
        <van-checkbox shape="square" style="margin: 16px 0 16px 20%" name="b">SLPU2098284</van-checkbox>
        <van-checkbox shape="square" style="margin: 16px 0 16px 20%" name="c">SLPU2098285</van-checkbox>
      </van-checkbox-group>
    </van-dialog>
    <van-dialog v-model="showDel" title="确认删除" @confirm="confirmClick" @cancel="() => (showDel = false)" show-cancel-button>
    </van-dialog>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <van-popup v-model="showPayment" position="bottom" @close="payClose" closeable :style="{ height: '60%', 'background-color': 'rgb(237 237 237)' }">
      <!-- <div style="font-size: 16px; margin: 20px 20px 14px 16px">订单号：{{ orderNum }}</div> -->
      <!-- 密码输入框 -->
      <div style="font-size: 16px; margin: 20px 20px 14px 16px">保费金额：{{ price / 100 }}</div>
      <van-password-input info="密码为 6 位数字" :error-info="errorInfo" :value="passwordValue" :focused="showKeyboard" />
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="passwordValue" :show="showKeyboard" />
    </van-popup>

    <van-popup v-model="showRecharge" position="bottom" @close="rechargeClose" closeable :style="{ height: '60%', 'background-color': 'rgb(237 237 237)' }">
      <recharge ref="recharge" @resubmit="resubmit" title="余额不足请充值"></recharge>
    </van-popup>

    <van-overlay :show="payLoading" style="z-index:20000">
      <van-loading style="margin-left:49%; margin-top:50%" />
    </van-overlay>
  </div>
</template>

<script>
import "vant-green/lib/index.css";
const Decimal = require("decimal.js");
const wx = require("weixin-js-sdk");
import moment from "moment";
import { Dialog } from "vant";
export default {
  name: "home",
  computed: {
    createTip() {
      return (curTime) => {
        const yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");
        if (curTime) {
          if (moment(curTime).isBefore(yesterday)) {
            return "不能小于昨天，请修改日期后再支付";
          } else {
            return "";
          }
        }
      };
    },
  },
  watch: {
    passwordValue(value) {
      if (value.length === 6) {
        this.payFunction()
      }
    },
  },
  data() {
    return {
      goStatus: 1,
      payType: "",
      payLoading: false,
      showPayment: false,
      errorInfo: "",
      passwordValue: "",
      showRecharge: false,
      showKeyboard: true,

      paidLoading: false,
      paidFinished: false,
      paidError: false,
      paidList: [],

      draftLoading: false,
      draftFinished: false,
      draftError: false,

      checked: false,
      draftChecked: false,
      loading: false,
      finished: false,
      error: false,
      isLoading: true,
      pageNum: 1,
      pageSize: 5,
      active: 0,
      queryContent: "",
      showAction: false,
      show: false,
      showDel: false,
      result: ["a", "b"],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "复制链接", icon: "link" },
      ],
      insureList: [],
      insuredList: [],
      price: 0,
    };
  },
  methods: {
    payFunction() {
      let params = {};
      let url = "";
      if (this.payType === "draft") {
        const warrantyDarftIds = [];
        this.insuredList.forEach((item) => {
          if (item.isTrue) {
            warrantyDarftIds.push(item.warrantyDarftId);
          }
        });
        url = "/warranty/darft/pay";
        params = {
          warrantyDarftIds,
          walletPassword: this.passwordValue,
          goStatus: this.goStatus,
        };
      } else {
        const orderNums = [];
        this.paidList.forEach((item) => {
          if (item.isTrue) {
            orderNums.push(item.orderNum);
          }
        });
        url = "/warranty/insure/mergePay";
        params = {
          orderNums,
          walletPassword: this.passwordValue,
        };
      }

      this.payLoading = true;
      this.$post(url, params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.$toast({
              message: "支付成功",
              duration: 800,
            });
            this.price = 0;
            this.checked = false;
            this.payClose();
            if (this.payType === "draft") {
              this.insuredList = [];
              this.draftOnLoad();
            } else {
              this.paidList = [];
              this.paidOnLoad();
            }
          } else if (res.code * 1 === 500) {
            if (res.msg === "个人账户余额不足") {
              this.$toast({
                message: "个人账户余额不足,请充值",
                duration: 3000,
              });
              this.$router.push({
                path: "/wallet",
              });
              // this.showRecharge = true
            } else {
              this.errorInfo = res.msg;
              this.passwordValue = "";
            }
          } else if (res && res.code * 1 === 9000) {
            if (res && res.code === 9000) {
              this.errorInfo = res.msg;
              Dialog.confirm({
                title: "提示",
                message: res.msg,
              })
                .then(() => {
                  this.goStatus = 0;
                  this.payFunction();
                })
                .catch(() => {
                  this.goStatus = 1;
                });
            }
          } else {
            this.passwordValue = "";
            this.errorInfo = res.msg;
          }
        })
        .finally(() => {
          this.payLoading = false;
        });
    },
    resubmit() {
      const orderNums = [];
      this.paidList.forEach((item) => {
        if (item.isTrue) {
          orderNums.push(item.orderNum);
        }
      });
      const params = {
        orderNums,
        walletPassword: this.passwordValue,
      };
      this.payLoading = true;
      this.$post("/warranty/insure/mergePay", params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.$toast({
              message: "支付成功",
              duration: 800,
            });
            this.price = 0;
            this.checked = false;
            this.payClose();
            this.paidList = [];
            this.paidOnLoad();
          } else if (res.code * 1 === 500) {
            if (res.msg === "个人账户余额不足") {
              this.$toast({
                message: "个人账户余额不足,请充值",
                duration: 2000,
              });
              this.showRecharge = true;
            }
          }
        })
        .finally(() => {
          this.payLoading = false;
        });
    },
    payClose() {
      this.showPayment = false;
      this.passwordValue = "";
    },

    rechargeClose() {
      this.$refs.recharge.initAmount();
      this.passwordValue = "";
    },

    allClick() {
      if (this.checked) {
        this.paidList.forEach((a) => {
          this.$set(a, "isTrue", true);
          a.isTrue = true;
        });
        const items = this.paidList.filter((item) => item.isTrue);
        // 使用 Decimal.js 计算属性 a 的和
        let sum = new Decimal(0);
        for (let item of items) {
          sum = sum.plus(new Decimal(item.insureFee));
        }
        const num = new Decimal(100);
        const product = sum.times(num);
        this.price = product.toString() * 1;
      } else {
        this.paidList.forEach((a) => {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        });
        this.price = 0;
      }
    },
    allClickDraft() {
      if (this.checked) {
        const yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");
        this.insuredList.forEach((a) => {
          if (moment(a.startTime).isBefore(yesterday)) {
            //
          } else {
            this.$set(a, "isTrue", true);
            a.isTrue = true;
          }
        });
        const items = this.insuredList.filter((item) => item.isTrue);
        // 使用 Decimal.js 计算属性 a 的和
        let sum = new Decimal(0);
        for (let item of items) {
          sum = sum.plus(new Decimal(item.insureFee));
        }
        const num = new Decimal(100);
        const product = sum.times(num);
        this.price = product.toString() * 1;
      } else {
        this.insuredList.forEach((a) => {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        });
        this.price = 0;
      }
    },
    selectedDraft(item) {
      this.insuredList.forEach((a) => {
        if (a.warrantyDarftId === item.warrantyDarftId) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        }
      });
      const items = this.insuredList.filter((item) => item.isTrue);

      // 使用 Decimal.js 计算属性 a 的和
      let sum = new Decimal(0);
      for (let item of items) {
        sum = sum.plus(new Decimal(item.insureFee));
      }

      const num = new Decimal(100);
      const product = sum.times(num);
      this.price = product.toString() * 1;

      if (items.length === this.insuredList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    insureNameChange(item) {
      this.paidList.forEach((a) => {
        if (a.orderNum === item.orderNum) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        }
      });
      const items = this.paidList.filter((item) => item.isTrue);

      // 使用 Decimal.js 计算属性 a 的和
      let sum = new Decimal(0);
      for (let item of items) {
        sum = sum.plus(new Decimal(item.insureFee));
      }

      const num = new Decimal(100);
      const product = sum.times(num);
      this.price = product.toString() * 1;

      if (items.length === this.paidList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    batchOrder(item) {
      this.$router.push({
        path: "/tempInput",
        query: {
          orderNum: item.orderNum,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
          batchOrder: true,
        },
      });
    },
    editInsuredClick(item) {
      this.$router.push({
        path: "/tempInput",
        query: {
          warrantyDarftId: item.warrantyDarftId,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
        },
      });
    },
    copyClick(item) {
      this.$router.push({
        path: "/tempInput",
        query: {
          orderNum: item.orderNum,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
        },
      });
    },
    copyInsuredClick(item) {
      this.$router.push({
        path: "/tempInput",
        query: {
          warrantyDarftId: item.warrantyDarftId,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
          copy: 1,
        },
      });
    },
    confirmClick() {
      const url =
        this.active === 1
          ? "/warranty/darft/remove"
          : "/warranty/insure/removeWaitPay";
      const params =
        this.active === 1
          ? { warrantyDarftId: this.deleteId }
          : { orderNum: this.deleteId };
      this.$post(url, params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$toast({
            message: "删除成功",
            duration: 800,
          });
          this.pageNum = 1;
          if (this.active === 1) {
            this.insuredList = [];
            this.draftOnLoad();
          } else {
            this.paidList = [];
            this.paidOnLoad();
          }
        }
      });
    },
    paidOnLoad() {
      this.paidLoading = true;
      this.$get("/warranty/insure/waitPay", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.getQueryContent(),
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.paidList = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.rows.length === 0 || this.paidList.length >= res.total) {
              this.paidFinished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.paidList = [...this.paidList, ...res.rows];
              this.paidList.forEach((item) => {
                item.isTrue = false;
              });
              this.pageNum++;
              this.paidLoading = false;
            }
          } else {
            this.paidError = true;
          }
        })
        .catch(() => {
          this.paidError = true;
        });
    },
    draftOnLoad() {
      this.draftLoading = true;
      this.$get("/warranty/darft/list", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.getQueryContent(),
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.insuredList = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.data.length === 0 || this.insuredList.length >= 1) {
              this.draftFinished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.insuredList = [...this.insuredList, ...res.data];
              // this.insuredList.forEach(item => {
              //   item.isTrue = false
              // })
              this.pageNum++;
              this.draftLoading = false;
            }
          } else {
            this.draftError = true;
          }
        })
        .catch(() => {
          this.draftError = true;
        });
    },
    onLoad() {
      this.loading = true;
      this.$get("/warranty/insure/aleryPay", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.getQueryContent(),
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.insureList = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.rows.length === 0 || this.insureList.length >= res.total) {
              this.finished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.insureList = [...this.insureList, ...res.rows];
              this.pageNum++;
              this.loading = false;
            }
          } else {
            this.error = true;
          }
        })
        .catch(() => {
          this.error = true;
        });
    },
    onRefresh() {
      this.$router.push({
        path: "/guaranteeSlip",
      });
      if (this.active === 0) {
        this.pageNum = 1;
        this.finished = false;
        this.onLoad();
      } else if (this.active === 1) {
        this.pageNum = 1;
        this.draftFinished = false;
        this.insuredList = [];
        this.draftOnLoad();
      } else {
        this.pageNum = 1;
        this.paidFinished = false;
        this.paidList = [];
        this.paidOnLoad();
      }
      this.checked = false;
      this.price = 0;
    },
    onSubmit(type) {
      this.payType = type;
      if (type === "draft") {
        if (!this.insuredList.length) {
          return;
        }
      } else {
        if (!this.paidList.length) {
          return;
        }
      }

      let flag = false;
      for (const item of type === "draft" ? this.insuredList : this.paidList) {
        if (item.isTrue) {
          flag = true;
        }
      }

      if (!flag) {
        this.$toast({
          message: "请勾选需要支付的项",
          duration: 1500,
        });
        return;
      }

      // if (!this.paidList.every(item => item.isTrue)) {
      //   this.$toast({
      //     message: "请勾选需要支付的项",
      //     duration: 1500,
      //   });
      //   return
      // }

      this.showPayment = true;
    },
    onClickRight() {
      this.toast("按钮");
    },
    onSearch() {
      this.$toast(this.value);
    },
    onFocus() {
      this.$router.push({
        path: "/PolicyQueryCriteria",
        query: {
          type: this.active,
          ...this.getQueryContent(),
        },
      });
      // this.showAction = true;
    },
    onCancel() {
      this.showAction = false;
    },
    splitOrderClick() {
      this.show = "true";
    },
    changeOrderClick() {
      this.$router.push("/changeOrder");
    },
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    shareClick() {
      this.showShare = true;
    },
    reportCaseClick(orderNum) {
      this.$router.push(`/reportCase?orderNum=${orderNum}`);
    },
    delClick(id) {
      this.deleteId = id;
      this.showDel = true;
    },
    detailClick(item) {
      this.$router.push({
        path: "/tempInput",
        query: {
          warrantyDarftId: item.warrantyDarftId,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
          isDetail: 1,
        },
      });
    },
    aaa(url) {
      console.log(url, "url");
      localStorage.setItem("policyDetails", url);
      this.$router.push({
        path: "/policyDetails",
        query: {
          imgUrl: url,
        },
      });
    },
    configWechatSDK(imgUrl) {
      // 从后端获取微信JS-SDK的配置信息
      const params = {
        url: window.location.href.split("#")[0],
      };
      this.$get("/wx/config", params)
        .then((res) => {
          const config = res.data;
          this.$toast({
            message: "请点击右上角 “···” 分享",
            duration: 1500,
          });
          wx.config({
            debug: false, // 开启调试模式
            appId: config.appId, // 必填，公众号的唯一标识
            timestamp: config.timestamp, // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature: config.signature, // 必填，签名
            jsApiList: [
              // 必填，需要使用的JS接口列表
              "updateAppMessageShareData",
            ],
          });
          wx.ready(() => {
            this.setShareInfo(imgUrl);
          });
        })
        .catch((err) => {
          console.log("获取微信JS-SDK配置失败", err);
        });
    },
    setShareInfo(imgUrl) {
      const { protocol, hostname } = window.location;
      console.log(protocol, hostname, "gggggg");
      // 分享给朋友的配置
      wx.updateAppMessageShareData({
        title: "保单详情", // 分享标题
        desc: "", // 分享描述
        link:
          window.location.href.split("#")[0] +
          `#/policyDetails?imgUrl=${imgUrl}`, // 分享链接addApplicant
        imgUrl: "分享的图标URL", // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          this.$toast("成功");
        },
        cancel: function () {
          this.$toast("失败");
          // 用户取消分享后执行的回调函数
        },
      });
    },
    getQueryContent() {
      const query = this.$route.query;
      if (this.active == 0) {
        this.queryContent =
          (query.insureNum || "") +
          " " +
          (query.containerNumber || "") +
          " " +
          (query.beginTime || "") +
          (query.beginTime ? "至" : "") +
          (query.endTime || "");
        return {
          beginTime: query.beginTime || "",
          endTime: query.endTime || "",
          insureNum: query.insureNum || "",
          containerNumber: query.containerNumber || "",
        };
      }
      if (this.active == 1) {
        this.queryContent =
          (query.containerNumber || "") +
          " " +
          (query.tagInvoiceWaybill || "") +
          " " +
          (query.beginTime || "") +
          (query.beginTime ? "至" : "") +
          (query.endTime || "");
        return {
          beginTime: query.beginTime || "",
          endTime: query.endTime || "",
          // tagInvoiceWaybill: query.tagInvoiceWaybill || '',
          containerNumber: query.containerNumber || "",
        };
      }
      if (this.active == 2) {
        this.queryContent =
          (query.containerNumber || "") +
          " " +
          (query.tagInvoiceWaybill || "") +
          " " +
          (query.beginTime || "") +
          (query.beginTime ? "至" : "") +
          (query.endTime || "");
        return {
          beginTime: query.beginTime || "",
          endTime: query.endTime || "",
          // tagInvoiceWaybill: query.tagInvoiceWaybill || '',
          containerNumber: query.containerNumber || "",
        };
      }
    },
  },
  mounted() {
    if (this.$route.query.type) {
      this.active = Number(this.$route.query.type);
    }
    this.getQueryContent();
  },
};
</script>
<style scoped>
.home {
  background-color: #f5f5f5;
}

.title {
  margin: 1em;
  font-size: 1.5em;
}

.van-submit-bar {
  bottom: 16rem !important;
}

.container {
  position: relative;
  /* 其他样式 */
}
</style>
<style>
.van-key__wrapper {
  text-align: center !important;
}

.van-password-input__item i {
  margin-top: 0;
}

.van-overlay {
  z-index: 3000;
}
</style>